```vue
<template>
  <div class="body-box">
    <!-- 半包围结构布局 -->
    <div class="semi-enclosed-layout">
      <!-- 左侧边栏 - 三行模块 -->
      <div class="left-sidebar">
        <!-- 取号情况分析模块 -->
        <div class="chart-module">
          <dv-border-box-8>
            <div class="chart-container">
              <!-- 标题栏 -->
              <div class="chart-title deep-blue-title">
                大厅取号情况分析
              </div>

              <!-- 模块1：全年累计取号量 -->
              <div class="annual-cards">
                <div class="annual-card" v-for="i in 6" :key="i">
                  <div class="card-number">{{ i }}</div>
                </div>
              </div>

              <!-- 模块2和模块3的容器 -->
              <div class="number-analysis-container">
                <!-- 模块2：取号总览 - 左边 -->
                <div class="module-left">
                  <div class="number-overview">
                    <div class="overview-row">
                      <div class="overview-card">
                        <div class="circular-value">99</div>
                        <div class="circular-label">今日取号量</div>
                      </div>
                      <div class="overview-card">
                        <div class="circular-value">100</div>
                        <div class="circular-label">昨日取号量</div>
                      </div>
                    </div>
                    <div class="overview-row">
                      <div class="overview-card">
                        <div class="circular-value">199</div>
                        <div class="circular-label">本月取号量</div>
                      </div>
                      <div class="overview-card">
                        <div class="circular-value">199</div>
                        <div class="circular-label">年度总取号量</div>
                      </div>
                    </div>
                  </div>
                </div>


                <div class="module-right">
                  <div class="department-ranking">
                    <div class="ranking-item">
                      <div class="item-icon flag-icon"></div>
                      <div class="item-info">
                        <div class="department-name">部门名称 A</div>
                        <div class="progress-bar">
                          <div class="progress-fill orange-progress" style="width: 100%"></div>
                        </div>
                      </div>
                      <div class="item-count">200 件</div>
                    </div>
                    <div class="ranking-item">
                      <div class="item-icon person-icon"></div>
                      <div class="item-info">
                        <div class="department-name">部门名称 B</div>
                        <div class="progress-bar">
                          <div class="progress-fill blue-progress" style="width: 85%"></div>
                        </div>
                      </div>
                      <div class="item-count">170 件</div>
                    </div>
                    <div class="ranking-item">
                      <div class="item-icon brown-badge"></div>
                      <div class="item-info">
                        <div class="department-name">部门名称 C</div>
                        <div class="progress-bar">
                          <div class="progress-fill blue-progress" style="width: 82%"></div>
                        </div>
                      </div>
                      <div class="item-count">164 件</div>
                    </div>
                    <div class="ranking-item">
                      <div class="item-icon gear-icon"></div>
                      <div class="item-info">
                        <div class="department-name">部门名称 D</div>
                        <div class="progress-bar">
                          <div class="progress-fill blue-progress" style="width: 77%"></div>
                        </div>
                      </div>
                      <div class="item-count">154 件</div>
                    </div>
                    <div class="ranking-item">
                      <div class="item-icon gray-badge"></div>
                      <div class="item-info">
                        <div class="department-name">部门名称 E</div>
                        <div class="progress-bar">
                          <div class="progress-fill blue-progress" style="width: 71.5%"></div>
                        </div>
                      </div>
                      <div class="item-count">143 件</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
        <!-- 大厅取号趋势分析模块 -->
        <div class="chart-module">
          <dv-border-box-8>
            <div class="chart-container">
              <!-- 标题栏 -->
              <div class="chart-title deep-blue-title">
                大厅取号趋势分析
              </div>
              <!-- 折线图容器 -->
              <div class="trend-chart-container-large">
                <div class="trend-chart" id="trend-chart-analysis" style="width: 100%; height: 100%;"></div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
        <!-- 第三模块 -->
        <div class="chart-module">
          <dv-border-box-8>
            <div class="chart-container">
              <!-- 标题栏 -->
              <div class="chart-title deep-blue-title">
                业务饱和排行榜
              </div>
              <!-- 业务饱和排行榜表格 -->
              <div class="saturation-ranking-table">
                <div class="table-header">
                  <div class="header-item">服务事项</div>
                  <div class="header-item">饱和值</div>
                  <div class="header-item">占比</div>
                  <div class="header-item">平均等待时长</div>
                </div>
                <div class="table-body">
                  <div class="table-row" v-for="item in rankingData" :key="item.name">
                    <div class="row-item">
                      <div class="item-icon" :class="item.iconClass"></div>
                      <span>{{ item.name }}</span>
                    </div>
                    <div class="row-item">
                      <div class="saturation-bar"
                        :style="{ width: item.saturation + '%', backgroundColor: item.barColor }"></div>
                    </div>
                    <div class="row-item">{{ item.percentage }}%</div>
                    <div class="row-item">{{ item.waitTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>

      <!-- 中间主内容区 -->
      <div class="main-content">
        <!-- 中上主要指标 - 占据较大面积 -->
        <div class="main-indicator">
          <dv-border-box-12>
            <div class="main-chart-container">
              <!-- 可视化区域（作为背景） -->
              <div class="main-visualization">
                <img src="@/assets/servicr.png" alt="行政服务中心背景" class="bg-image">
                <div class="hotspot" @mouseover="showDetail = true" @mouseout="showDetail = false">
                  <div class="detail-box" v-if="showDetail">
                    <img src="@/assets/image.png" alt="服务大厅内部">
                    <div class="detail-label">西红市行政服务中心</div>
                  </div>
                </div>
              </div>

              <!-- 四个数据指标区域（放在可视化区域上方） -->
              <div class="data-indicators">
                <!-- 今日取号 -->
                <div class="data-item">
                  <div class="data-content">
                    <div class="data-value number-color-1">66 <span class="unit">人</span></div>
                    <div class="data-icon icon-bg-1">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2">
                        <path
                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2z" />
                      </svg>
                    </div>
                    <div class="data-label">今日取号</div>
                  </div>
                </div>

                <!-- 正在受理 -->
                <div class="data-item">
                  <div class="data-content">
                    <div class="data-value number-color-2">199 <span class="unit">人</span></div>
                    <div class="data-icon icon-bg-2">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                        <path d="M14 2v6h6" />
                        <circle cx="11" cy="13" r="2" />
                      </svg>
                    </div>
                    <div class="data-label">正在受理</div>
                  </div>
                </div>

                <!-- 等待受理 -->
                <div class="data-item">
                  <div class="data-content">
                    <div class="data-value number-color-3">99 <span class="unit">人</span></div>
                    <div class="data-icon icon-bg-3">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2">
                        <circle cx="12" cy="7" r="4" />
                        <path d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                        <circle cx="12" cy="12" r="10" />
                      </svg>
                    </div>
                    <div class="data-label">等待受理</div>
                  </div>
                </div>

                <!-- 平均办理时长 -->
                <div class="data-item">
                  <div class="data-content">
                    <div class="data-value number-color-4">20 <span class="unit">分</span></div>
                    <div class="data-icon icon-bg-4">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2">
                        <circle cx="12" cy="12" r="10" />
                        <path d="M12 6v6l4 2" />
                        <circle cx="12" cy="7" r="1" />
                      </svg>
                    </div>
                    <div class="data-label">平均办理时长</div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-12>
        </div>

        <!-- 中下次要指标 - 面积较小 -->
        <div class="secondary-indicator">
          <dv-border-box-8>
            <div class="secondary-chart-container">
              <!-- 标题栏 -->
              <div class="chart-title deep-blue-title">
                办事群众来源分析
              </div>
              <!-- 办事群众来源分析容器 - 三列布局 -->
              <div class="source-analysis-container">
                <!-- 第一列：归属地占比和性别比例 -->
                <div class="analysis-column">
                  <div class="analysis-item">
                    <div class="item-subtitle">办事群众人员归属地占比</div>
                    <div class="donut-container-large">
                      <div class="donut-chart donut-chart-expanded" id="donut-chart"></div>
                      <div class="legend">
                        <div class="legend-item">
                          <div class="legend-color" style="background-color: #22cc88;"></div>
                          <span>本地人</span>
                        </div>
                        <div class="legend-item">
                          <div class="legend-color" style="background-color: #ffcc33;"></div>
                          <span>外地人</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="analysis-item">
                    <div class="item-subtitle">性别比例</div>
                    <div class="gender-chart">
                      <div class="gender-item">
                        <div class="gender-icon male"></div>
                        <span>男性 51%</span>
                      </div>
                      <div class="gender-item">
                        <div class="gender-icon female"></div>
                        <span>女性 49%</span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 第二列：桑基图 -->
                <div class="analysis-column">
                  <div class="analysis-item">
                    <div class="item-subtitle">桑基图</div>
                    <div class="sankey-chart" id="sankey-chart"></div>
                  </div>
                </div>

                <!-- 第三列：年龄段人数分布 -->
                <div class="analysis-column">
                  <div class="analysis-item">
                    <div class="item-subtitle">办事群众各年龄段人数分布</div>
                    <div class="bar-chart" id="bar-chart"></div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>

      <!-- 右侧边栏 - 三行模块 -->
      <div class="right-sidebar">
        <div class="chart-module">
          <dv-border-box-8>
            <div class="chart-container">
              <!-- 标题栏 -->
              <div class="chart-title deep-blue-title">
                大厅窗口分析
              </div>
              <!-- 大厅窗口分析容器 -->
              <div class="window-analysis-container">
                <div class="window-types">
                  <div class="window-item" v-for="item in windowData" :key="item.type">
                    <div class="window-count">{{ item.count }}</div>
                    <div class="window-label">{{ item.type }}</div>
                  </div>
                </div>
                <div class="window-utilization">
                  <div class="utilization-label">窗口使用率</div>
                  <div class="utilization-bar">
                    <div class="bar-fill" :style="{ width: utilizationRate + '%' }"></div>
                    <div class="bar-text">{{ utilizationRate }}%</div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
        <div class="chart-module">
          <dv-border-box-8>
            <div class="chart-container">
              <!-- 标题栏 -->
              <div class="chart-title deep-blue-title">
                累计平均办理时长TOP5
              </div>
              <!-- 累计平均办理时长图表容器 -->
              <div class="duration-chart-container">
                <div class="bar-chart" id="duration-chart"></div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
        <div class="chart-module">
          <dv-border-box-8>
            <div class="chart-container">
              <!-- 标题栏 -->
              <div class="chart-title deep-blue-title">
                今日大厅满意度评价分析
              </div>
              <!-- 满意度分析容器 -->
              <div class="satisfaction-analysis-container">
                <div class="row">
                  <div class="col-left">
                    <div class="donut-chart donut-chart-large" id="satisfaction-donut"></div>
                    <!-- 好评差评图例放在甜甜圈下方 -->
                    <div class="legend-container">
                      <div class="legend-item">
                        <div class="legend-color" style="background-color: #00bfa5;"></div>
                        <span>好评</span>
                      </div>
                      <div class="legend-item">
                        <div class="legend-color" style="background-color: #ff5722;"></div>
                        <span>差评</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-right">
                    <div class="evaluation-counts">
                      <div class="evaluation-item" v-for="(count, index) in evaluationCounts" :key="index">
                        <div class="count-text">{{ count }}</div>
                      </div>
                      <div class="evaluation-label">今日评价次数 人/次</div>
                    </div>
                    <div class="bar-chart bar-chart-small" id="department-satisfaction"></div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';


export default defineComponent({
  components: {

  },
  setup() {
    const evaluationCounts = ref(['0', '1', '2', '4']);

    const windowData = ref([
      { type: '办事窗口A(个)', count: 99 },
      { type: '办事窗口B(个)', count: 99 },
      { type: '办事窗口C(个)', count: 99 },
      { type: '办事窗口D(个)', count: 99 },
    ]);
    const utilizationRate = ref(88);
    const rankingData = ref([
      { name: '服务事项A', iconClass: 'icon-medal-gold', saturation: 90, barColor: '#ff3333', percentage: 90, waitTime: '15 min' },
      { name: '服务事项B', iconClass: 'icon-medal-silver', saturation: 80, barColor: '#ff9933', percentage: 80, waitTime: '15 min' },
      { name: '服务事项C', iconClass: 'icon-medal-bronze', saturation: 60, barColor: '#ffff33', percentage: 60, waitTime: '15 min' },
      { name: '服务事项D', iconClass: 'icon-medal-blue', saturation: 40, barColor: '#33ccff', percentage: 40, waitTime: '15 min' },
      { name: '服务事项E', iconClass: 'icon-medal-lightblue', saturation: 30, barColor: '#66ccff', percentage: 30, waitTime: '15 min' },
    ]);


    // * tab切换 颜色背景改变
    const lastChar = location.href.substr(location.href.length - 1)
    const tabColor = ref(lastChar)
    // * 颜色
    const decorationColors = ['#568aea', '#000000']
    // * 加载标识
    const loading = ref<boolean>(true)
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: '',
      dateYear: '',
      dateWeek: ''
    })
    // 热点详情显示控制
    const showDetail = ref(false)

    const router = useRouter()
    //路由跳转
    const shou = () => {
      router.push("/")
      console.log("跳转成功");
    }

    const tiao = () => {
      router.push("/wzh2")
      console.log("跳转成功");
    }

    const tiao2 = () => {
      router.push("/wzh3")
    }

    const tiao3 = () => {
      router.push("/sjk")
    }

    const tiao4 = () => {
      router.push("/sjk1")
    }
    const tiao5 = () => {
      router.push("/sjk2")
    }
    const tiao6 = () => {
      router.push("/mhr1")
    }
    const tiao7 = () => {
      router.push("/mhr2")
    }
    const tiao8 = () => {
      router.push("/mhr3")
    }
    const tiao9 = () => {
      router.push("/st1")
    }
    const tiao10 = () => {
      router.push("/st2")
    }
    const tiao11 = () => {
      router.push("/st3")
    }


    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
    // 生命周期
    onMounted(() => {
      cancelLoading()
      handleTime()
      // todo 屏幕适应
      windowDraw()
      calcRate()
      // 初始化好评率甜甜圈图
      const satisfactionDonutDom = document.getElementById('satisfaction-donut') as HTMLDivElement;
      if (satisfactionDonutDom) {
        const chart = echarts.init(satisfactionDonutDom);
        const option = {
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '45%'],
              data: [
                { value: 90, itemStyle: { color: '#00bfa5' } },
                { value: 10,  itemStyle: { color: '#ff5722' } }
              ],
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                borderWidth: 3,
                borderColor: '#0f1325'
              }
            }
          ],
          legend: {
            orient: 'vertical' as 'vertical',
            left: 'center',
            bottom: '5%',
            textStyle: {
              color: '#fff',
              fontSize: 12,
              fontWeight: 'bold' as 'bold'
            },
            data: ['好评', '差评'],
            itemGap: 10
          },
          backgroundColor: 'rgba(0, 0, 0, 0)'
        };
        chart.setOption(option);
      }

      // 初始化部门满意度柱状图
      const barDomm = document.getElementById('department-satisfaction') as HTMLDivElement;
      if (barDomm) {
        const chart = echarts.init(barDomm);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          xAxis: {
            type: 'category' as const,
            data: ['办事部门A', '办事部门B', '办事部门C', '办事部门D', '办事部门E'],
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: 'rgba(255,255,255,0.8)' }
          },
          yAxis: {
            type: 'value' as const,
            name: '次',
            nameTextStyle: { color: 'rgba(255,255,255,0.8)' },
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: 'rgba(255,255,255,0.8)' },
            splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
          },
          series: [
            {
              name: '好评',
              type: 'bar',
              data: [36, 27, 21, 36, 27],
              itemStyle: { color: '#00bfa5' },
              barWidth: '30%'
            },
            {
              name: '差评',
              type: 'bar',
              data: [10, 9, 12, 10, 9],
              itemStyle: { color: '#ff5722' },
              barWidth: '30%'
            }
          ],
          legend: {
            show: false
          },
          grid: {
            left: '8%',
            right: '8%',
            bottom: '18%',
            top: '15%'
          }
        };
        chart.setOption(option);
      }
      // 初始化大厅取号趋势分析折线图
      initTrendChart()
      // 初始化累计平均办理时长柱状图
      const durationDom = document.getElementById('duration-chart') as HTMLDivElement;
      if (durationDom) {
        const chart = echarts.init(durationDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          xAxis: {
            type: 'category' as const,
            data: ['事项A', '事项B', '事项C', '事项D', '事项E'],
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: 'rgba(255,255,255,0.8)' }
          },
          yAxis: {
            type: 'value' as const,
            name: 'min',
            nameTextStyle: { color: 'rgba(255,255,255,0.8)' },
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: 'rgba(255,255,255,0.8)' },
            splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
          },
          series: [
            {
              type: 'bar',
              data: [36, 27, 21, 14, 8],
              itemStyle: {
                color: (params) => {
                  const colors = ['#ff4444', '#ffb84d', '#cc99ff', '#4dd0e1', '#4db2ff'];
                  return colors[params.dataIndex];
                },
                borderRadius: [4, 4, 0, 0]
              },
              label: {
                show: true,
                position: 'top',
                color: '#ffffff',
                fontSize: 14,
                fontWeight: 'bold'
              },
              barWidth: '40%'
            }
          ],
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '20%'
          }
        };
        chart.setOption(option);

        // 窗口大小变化时重新渲染
        window.addEventListener('resize', () => {
          chart.resize();
        });
      }
      // 初始化甜甜圈图（归属地占比）
      const donutDom = document.getElementById('donut-chart') as HTMLDivElement;
      if (donutDom) {
        const chart = echarts.init(donutDom);
        const option = {
          series: [
            {
              type: 'pie',
              radius: ['40%', '65%'],
              data: [
                { value: 55, name: '本地人', itemStyle: { color: '#22cc88' } },
                { value: 45, name: '外地人', itemStyle: { color: '#ffcc33' } }
              ],
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              // 中间图标
              center: ['50%', '50%'],
              itemStyle: {
                borderWidth: 2,
                borderColor: '#1e3a8a'
              }
            }
          ],
          backgroundColor: 'rgba(0, 0, 0, 0)'
        };
        chart.setOption(option);
      }

      // 初始化桑基图
      const sankeyDom = document.getElementById('sankey-chart') as HTMLDivElement;
      if (sankeyDom) {
        const chart = echarts.init(sankeyDom);
        const option = {
          title: { show: false },
          tooltip: { trigger: 'item' as const, triggerOn: 'mousemove' as const },
          series: [
            {
              type: 'sankey',
              layoutIterations: 32,
              data: [
                { name: '本地', itemStyle: { color: '#1e90ff' } }, // 道奇蓝
                { name: '外地', itemStyle: { color: '#ff4444' } }, // 红色
                { name: '18-30岁', itemStyle: { color: '#4682b4' } }, // 钢蓝色
                { name: '31-40岁', itemStyle: { color: '#ff6666' } }, // 浅红色
                { name: '41-50岁', itemStyle: { color: '#5f9ea0' } }, // 卡其蓝
                { name: '51-60岁', itemStyle: { color: '#ff8c8c' } }, // 淡红色
                { name: '60岁以上', itemStyle: { color: '#87ceeb' } }  // 天蓝色
              ],
              links: [
                { source: '本地', target: '18-30岁', value: 2500, lineStyle: { color: '#1e90ff' } },
                { source: '本地', target: '31-40岁', value: 3500, lineStyle: { color: '#1e90ff' } },
                { source: '本地', target: '41-50岁', value: 1500, lineStyle: { color: '#1e90ff' } },
                { source: '本地', target: '51-60岁', value: 1200, lineStyle: { color: '#1e90ff' } },
                { source: '本地', target: '60岁以上', value: 800, lineStyle: { color: '#1e90ff' } },
                { source: '外地', target: '18-30岁', value: 1500, lineStyle: { color: '#ff4444' } },
                { source: '外地', target: '31-40岁', value: 2500, lineStyle: { color: '#ff4444' } },
                { source: '外地', target: '41-50岁', value: 1000, lineStyle: { color: '#ff4444' } },
                { source: '外地', target: '51-60岁', value: 800, lineStyle: { color: '#ff4444' } },
                { source: '外地', target: '60岁以上', value: 500, lineStyle: { color: '#ff4444' } }
              ],
              emphasis: {
                focus: 'adjacency',
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#fff'
                }
              },
              // 使用蓝色和红色主题
              itemStyle: {
                borderWidth: 0,
                gapWidth: 8
              },
              lineStyle: {
                color: 'gradient',
                curveness: 0.5,
                opacity: 0.8
              },
              // 文本标签样式 - 设置为白色
              label: {
                color: '#ffffff',
                fontSize: 12,
                fontWeight: 'bold'
              }
            }
          ],
          backgroundColor: 'rgba(0, 0, 0, 0)'
        };
        chart.setOption(option);
      }

      // 初始化柱状图（年龄段分布）
      const barDom = document.getElementById('bar-chart') as HTMLDivElement;
      if (barDom) {
        const chart = echarts.init(barDom);
        const option = {
          xAxis: {
            type: 'category' as const,
            data: ['18-30岁', '31-40岁', '41-50岁', '51-60岁', '60岁以上'],
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: 'rgba(255,255,255,0.8)' }
          },
          yAxis: {
            type: 'value' as const,
            max: 6000,
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: 'rgba(255,255,255,0.8)' },
            splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
          },
          series: [
            {
              name: '男性',
              type: 'bar',
              stack: '总量',
              data: [1000, 2500, 500, 300, 200],
              itemStyle: { color: '#4682b4' }
            },
            {
              name: '女性',
              type: 'bar',
              stack: '总量',
              data: [2000, 2000, 1000, 700, 300],
              itemStyle: { color: '#ff6666' }
            }
          ],
          legend: {
            textStyle: { color: 'rgba(255,255,255,0.8)' },
            right: 10
          },
          backgroundColor: 'rgba(0, 0, 0, 0)'
        };
        chart.setOption(option);
      }
    })

    onUnmounted(() => {
      unWindowDraw()
      clearInterval(timeInfo.setInterval)
    })

    //点击颜色切换  路由跳转
    const tab = (index) => {
      // console.log(index)
      tabColor.value = index
      router.push(`/tab${index}`)
    }

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()]
      }, 1000)
    }

    // 初始化大厅取号趋势分析折线图
    const initTrendChart = () => {
      const trendDom = document.getElementById('trend-chart-analysis') as HTMLDivElement;
      if (trendDom) {
        const chart = echarts.init(trendDom);
        const option = {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          tooltip: {
            trigger: 'axis' as const,
            axisPointer: {
              type: 'cross' as const,
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            top: 5,
            right: 10,
            textStyle: {
              color: '#d3d6dd',
              fontSize: 10
            },
            data: ['预计取号量', '当前取号量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            top: '20%',
            containLabel: true
          },
          xAxis: {
            type: 'category' as const,
            boundaryGap: false,
            data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.3)'
              }
            },
            axisLabel: {
              color: 'rgba(255,255,255,0.8)',
              fontSize: 10,
              interval: 0
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value' as const,
            name: '人',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.8)',
              fontSize: 10
            },
            min: 0,
            max: 250,
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.3)'
              }
            },
            axisLabel: {
              color: 'rgba(255,255,255,0.8)',
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.1)',
                type: 'dashed' as const
              }
            }
          },
          series: [
            {
              name: '预计取号量',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              itemStyle: {
                color: '#00FFFF'
              },
              lineStyle: {
                color: '#00FFFF',
                width: 2
              },
              areaStyle: {
                color: '#00FFFF',
                opacity: 0.3
              },
              data: [50, 120, 180, 150, 200, 220, 210, 180, 150, 100, 80]
            },
            {
              name: '当前取号量',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              itemStyle: {
                color: '#1E90FF'
              },
              lineStyle: {
                color: '#1E90FF',
                width: 2
              },
              areaStyle: {
                color: '#1E90FF',
                opacity: 0.3
              },
              data: [40, 80, 120, 100, 140, 160, 180, 160, 130, 90, 60]
            }
          ],
          animationDuration: 1500
        };
        chart.setOption(option);

        // 添加窗口大小变化监听，重新渲染图表
        window.addEventListener('resize', function () {
          chart.resize();
        });
      }
    }

    // return
    return {
      rankingData,
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      tabColor,
      tab,
      tiao,
      tiao2,
      shou,
      tiao3,
      tiao4,
      tiao5,
      tiao6,
      tiao7,
      tiao8,
      tiao9,
      tiao10,
      tiao11,
      showDetail,
      windowData,
      utilizationRate,
      evaluationCounts
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';


// 今日大厅满意度评价分析模块样式
.satisfaction-analysis-container {
  width: 100%;
  height: calc(100% - 40px);
}

.row {
  display: flex;
  gap: 10px;
}

.col-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.col-right {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

// 好评差评图例样式
.legend-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 5px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.evaluation-counts {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.evaluation-item {
  background: #007bff;
  color: #fff;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: bold;
}

.evaluation-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  margin-top: 5px;
}

// 复用深色标题样式
.deep-blue-title {
  background: #1e3a8a !important;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
}

// 累计平均办理时长模块样式
.duration-chart-container {
  width: 100%;
  height: calc(100% - 40px);
}

// 复用深色标题样式
.deep-blue-title {
  background: #1e3a8a !important;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
}

// 大厅窗口分析模块样式
.window-analysis-container {
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.window-types {
  display: flex;
  justify-content: space-around;
}

.window-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #34B5D4;
  border: 1px solid rgba(116, 168, 249, 0.3);
  border-radius: 8px;
  padding: 10px;
  width: 22%;
}

.window-count {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.window-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.window-utilization {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.utilization-label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.utilization-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  background: #06b6d4;
  border-radius: 5px;
}

.bar-text {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

// 复用深色标题样式
.deep-blue-title {
  background: #1e3a8a !important;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
}

// 办事群众来源分析模块样式 - 三列布局
.secondary-indicator {
  flex: 1;
  min-height: 250px;
}

.secondary-chart-container {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

// 三列布局容器
.source-analysis-container {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
}

// 列容器
.analysis-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

// 第一列：两个子项目垂直排列
.analysis-column:nth-child(1) .analysis-item {
  min-height: 50%;
}

// 第二列和第三列：单个项目占满高度
.analysis-column:nth-child(2) .analysis-item,
.analysis-column:nth-child(3) .analysis-item {
  flex: 1;
}

.analysis-item {
  flex: 1;

  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.item-subtitle {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}

.donut-chart,
.sankey-chart,
.bar-chart {
  width: 100%;
  height: 100%;
}

.donut-container {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 70px;
}

.donut-container-large {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 110px;
  padding: 8px;

  border-radius: 6px;
  background: rgba(15, 19, 37, 0.6);
}

.donut-chart {
  flex: 1;
  min-height: 60px;
  height: 60px;
}

.donut-chart-expanded {
  flex: 1;
  min-height: 90px;
  height: 90px;
}

.donut-chart-large {
  min-height: 90px;
  height: 90px;
}

.sankey-chart {
  min-height: 100px;
}

.bar-chart {
  min-height: 180px;
  height: 180px;
}

.bar-chart-small {
  min-height: 120px;
  height: 120px;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: 12px;
}

.legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: 12px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.gender-chart {
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

.gender-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 14px;
}

.gender-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  background-color: #0f1325;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.male {
  color: #4682b4;
}

.female {
  color: #ff6666;
}

// 业务饱和排行榜模块样式
.saturation-ranking-table {
  width: 100%;
  height: calc(100% - 30px);
  background-color: rgba(30, 58, 138, 0.3);
  border-radius: 4px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #1e3a8a;
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
  height: 25px;
}

.header-item {
  flex: 1;
  padding: 4px 6px;
  text-align: center;
  line-height: 17px;
}

.table-body {
  display: flex;
  flex-direction: column;
}

.table-row {
  display: flex;
  color: #ffffff;
  font-size: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  height: 22px;
}

.row-item {
  flex: 1;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  line-height: 18px;
}

.row-item:first-child {
  flex: 0 0 30%;
}

.row-item:nth-child(2) {
  flex: 0 0 30%;
}

.item-icon {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
}

.icon-medal-gold {
  background-color: #ffcc00;
}

.icon-medal-silver {
  background-color: #cccccc;
}

.icon-medal-bronze {
  background-color: #cc9966;
}

.icon-medal-blue {
  background-color: #33ccff;
}

.icon-medal-lightblue {
  background-color: #66ccff;
}

.saturation-bar {
  height: 6px;
  border-radius: 3px;
  background-color: #cccccc;
  overflow: hidden;
}

// 复用深色标题样式
.deep-blue-title {
  background: #1e3a8a !important;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
}

// 半包围结构布局样式
.semi-enclosed-layout {
  width: 100%;
  height: 800px; // 使用视口高度
  min-height: 800px; // 设置最小高度
  display: flex;
  gap: 15px; // 增加间距
  padding: 15px;
}

// 左侧边栏
.left-sidebar {
  width: 20%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

// 右侧边栏
.right-sidebar {
  width: 20%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

// 中间主内容区
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

// 图表模块
.chart-module {
  flex: 1;
  min-height: 200px; // 增加最小高度
}

// 图表容器 - 添加边框样式
.chart-container {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(116, 168, 249, 0.3);
  border-radius: 6px;
  background: rgba(15, 19, 37, 0.6);
}

// 图表标题 - 确保边框可见
.chart-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 0;
  color: #fff;
  background: rgba(15, 19, 37, 0.8);
  border: 1px solid rgba(116, 168, 249, 0.3);
  border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
}

// 主要指标区域
.main-indicator {
  flex: 3;
  min-height: 400px; // 增加最小高度
}

// 主要图表容器
.main-chart-container {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 四个数据指标区域
.data-indicators {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  height: 120px;

  border-radius: 12px;


  padding: 15px;
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 10;
}

.data-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.data-value {
  font-size: 28px;
  font-weight: bold;
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.unit {
  font-size: 16px;
  font-weight: normal;
  margin-left: 2px;
}

.data-label {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  white-space: nowrap;
}

.data-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.data-icon::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  transform: rotate(45deg);
}

.data-icon svg {
  width: 24px;
  height: 24px;
  stroke: white;
  stroke-width: 2;
  z-index: 1;
  position: relative;
}

// 颜色配置
.number-color-1 {
  color: #0d9488; // 青绿色
}

.icon-bg-1 {
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.number-color-2 {
  color: #06b6d4; // 浅蓝色
}

.icon-bg-2 {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.number-color-3 {
  color: #f59e0b; // 橙色
}

.icon-bg-3 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.number-color-4 {
  color: #10b981; // 绿色
}

.icon-bg-4 {
  background: linear-gradient(135deg, #10b981, #059669);
}



// 主要可视化区域
.main-visualization {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, #0f1325, #1a1f33);
  border-radius: 8px;
  border: 1px solid rgba(116, 168, 249, 0.3);
  overflow: hidden;
}

.bg-image {
  width: 1050px;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.hotspot {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 16px;
  height: 16px;
  background: #06b6d4;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.detail-box {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 300px;
  background: rgba(15, 19, 37, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(116, 168, 249, 0.3);
  overflow: hidden;
  z-index: 3;
}

.detail-box img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.detail-label {
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

// 次要指标区域
.secondary-indicator {
  flex: 1;
  min-height: 250px; // 增加最小高度
}

// 次要图表容器
.secondary-chart-container {
  height: calc(100% - 40px);
  padding: 10px;
}

// 取号情况分析模块样式
.deep-blue-title {
  background: #1e3a8a !important; // 深蓝色标题栏
  color: #ffffff;
  font-size: 14px;
  /* 缩小字体 */
  font-weight: bold;
  padding: 8px 0;
  /* 缩小内边距 */
  border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
  /* 缩小间距 */
}

// 模块1：全年累计取号量
.annual-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  /* 缩小间距 */
  padding: 0 8px;
  /* 缩小内边距 */
}

.annual-card {
  width: 35px;
  /* 缩小方块尺寸 */
  height: 35px;
  background: linear-gradient(135deg, #3b82f6, #1e40af); // 蓝色方块
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-number {
  color: #ffffff;
  font-size: 14px;
  /* 缩小字体 */
  font-weight: bold;
}

// 模块2和模块3容器
.number-analysis-container {
  display: flex;
  gap: 15px;
  /* 缩小间距 */
  padding: 0 8px;
  /* 缩小内边距 */
}

.module-left {
  flex: 1;
  min-width: 0;
}

.module-right {
  flex: 1;
  min-width: 0;
}

// 模块2：取号总览
.number-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 缩小间距 */
}

.overview-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  /* 缩小间距 */
}

.overview-card {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.circular-value {
  width: 35px;
  /* 缩小圆形尺寸 */
  height: 35px;
  background: linear-gradient(135deg, #1e40af, #1e3a8a); // 深蓝色圆形
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  /* 缩小字体 */
  font-weight: bold;
  margin-bottom: 3px;
  /* 缩小间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.circular-label {
  color: #ffffff;
  font-size: 10px;
  /* 缩小字体 */
  font-weight: 500;
}

// 模块3：部门排名
.department-ranking {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 进一步缩小间距 */
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 4px;
  /* 进一步缩小间距 */
  padding: 4px;
  /* 进一步缩小内边距 */
  background: rgba(30, 58, 138, 0.3); // 深蓝色背景
  border-radius: 3px;
  height: 20px;
  /* 固定高度以缩小 */
}

.item-icon {
  width: 8px;
  /* 进一步缩小图标尺寸 */
  height: 8px;
  border-radius: 1px;
  flex-shrink: 0;
}

.flag-icon {
  background: #f59e0b; // 橙色旗帜
}

.person-icon {
  background: #06b6d4; // 浅蓝色人形
  border-radius: 50%;
}

.brown-badge {
  background: #92400e; // 棕色徽章
}

.gear-icon {
  background: #6b7280; // 灰色齿轮
}

.gray-badge {
  background: #374151; // 灰色徽章
}

.item-info {
  flex: 1;
  min-width: 0;
}

.department-name {
  color: #ffffff;
  font-size: 10px;
  /* 缩小字体 */
  font-weight: 500;
  margin-bottom: 3px;
  /* 缩小间距 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-bar {
  width: 100%;
  height: 6px;
  /* 缩小进度条高度 */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.orange-progress {
  background: linear-gradient(90deg, #f59e0b, #d97706); // 橙色进度条
}

.blue-progress {
  background: linear-gradient(90deg, #06b6d4, #0891b2); // 浅蓝色进度条
}

.item-count {
  color: #ffffff;
  font-size: 10px;
  /* 缩小字体 */
  font-weight: 500;
  white-space: nowrap;
}

// 趋势分析图表样式 - 放大版
.trend-chart-container-large {
  flex: 1;
  margin-bottom: 10px;
}

.chart-module {
  flex: 1;
  min-height: 200px;
  height: calc(33.33% - 10px); // 这行限制了高度！
}

.trend-chart {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.trend-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  background: rgba(30, 58, 138, 0.3);
  border-radius: 4px;
}

.stat-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 500;
}

.stat-value {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}

.stat-value.positive {
  color: #00ff88;
}

.stat-value.negative {
  color: #ff4444;
}

// 保证布局响应式
@media (max-width: 1400px) {

  .left-sidebar,
  .right-sidebar {
    width: 25%;
  }

  .main-content {
    flex: 0.5;
  }

  .annual-card {
    width: 40px;
    height: 40px;
  }

  .card-number {
    font-size: 16px;
  }

  .circular-value {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
}

@media (max-width: 1200px) {
  .semi-enclosed-layout {
    flex-direction: column;
    height: auto;
  }

  .left-sidebar,
  .right-sidebar {
    width: 100%;
    flex-direction: row;
  }

  .chart-module {
    flex: 1;
  }

  .number-overview {
    flex-wrap: wrap;
  }

  .overview-card {
    flex: 0 0 45%;
    margin-bottom: 10px;
  }
}
</style>
